<template>
  <q-modal v-model="modalVisible" :header="header" width="500" @beforeClose="handleClose" @confirm="handleSubmit">
    <qx-form ref="dotMatrix" v-model="formInfo" :option="formOption">
      <template v-slot:coord="{ attrs = {} }">
        <div class="row justify-between no-wrap">
          <q-number v-model="formInfo.x" class="col" decimals="3" v-bind="attrs" v-bind:placeholder="'x'"
                    v-bind:rules="getRules('X')"></q-number>
          <div class="row items-end q-px-xs">,</div>
          <q-number v-model="formInfo.y" class="col" decimals="3" v-bind="attrs" v-bind:placeholder="'y'"
                    v-bind:rules="getRules('Y')"></q-number>
        </div>
      </template>
      <template v-slot:dotCell="{ attrs = {} }">
        <div class="row justify-between no-wrap">
          <q-number v-model="formInfo.rows" class="col" decimals="0" v-bind="attrs"
                    v-bind:placeholder="`${$t('Misc.Rows')}`" v-bind:rules="getRules(`${$t('Misc.Rows')}`)"></q-number>
          <div class="row items-center q-px-xs">X</div>
          <q-number v-model="formInfo.cols" class="col" decimals="0" v-bind="attrs"
                    v-bind:placeholder="`${$t('Misc.Columns')}`"
                    v-bind:rules="getRules(`${$t('Misc.Columns')}`)"></q-number>
        </div>
      </template>
    </qx-form>
  </q-modal>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { isEmpty } from 'src/utils/utils'
import { addDotMatrix } from 'src/views/MapCore/MapGlobal/utils/KonvaEvent.js'
import { computed, ref, watch } from 'vue'

const props = defineProps({ pointInfo: Object, modelValue: Boolean })

const emits = defineEmits(['update:modelValue'])
const header = computed(() => `${i18n.t('MapCore.AddDotMatrix')}(${props.pointInfo?.positionPackageName || ''})`)
watch(() => props.modelValue, value => {
  if (value) modalVisible.value = value
})

const formInfo = ref({})
const dotMatrix = ref(null)
const modalVisible = ref(false)
const formOption = computed(() => {
  return {
    span: 23,
    labelWidth: 120,
    column: [{
      label: `${i18n.t('MapCore.ReferencePointCoordinates')}(x,y)`, field: 'coord', required: true, formslot: true
    }, {
      label: `${i18n.t('MapCore.StationRowsColumns')}`, field: 'dotCell', required: true, formslot: true
    }, {
      label: `${i18n.t('Misc.HSpace')}(m)`, field: 'rowSpan', type: 'number', decimals: 3, min: 0,
      required: true, value: 1
    }, {
      label: `${i18n.t('Misc.VSpace')}(m)`, field: 'colSpan', type: 'number', decimals: 3, min: 0,
      required: true, value: 1
    }]
  }
})

const getRules = coord => {
  const tips = ['X', 'Y'].includes(coord.toUpperCase()) ? i18n.t('MapCore.SpecifyCoord', { coord }) : coord
  return [val => !isEmpty(val) || `${i18n.t('PleaseInput')}${tips}`]
}

const handleClose = () => {
  if (dotMatrix.value) dotMatrix.value.onReset()
  modalVisible.value = false
  emits('update:modelValue', false)
}
const handleSubmit = mDone => {
  if (!dotMatrix.value) return mDone(false)
  dotMatrix.value.validate((form, done) => {
    addDotMatrix && addDotMatrix(props.pointInfo, form)
    done()
    mDone()
  }, () => {
    if (mDone) mDone(false)
  })
}
</script>